@import "../../../assets/css/function.scss";
.run-chart{
    .head {
        overflow: hidden;
        height: px2rem(100px);
        background: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .back-img {
            display: inline-block;
            height: px2rem(30px);
            width: px2rem(30px);
            margin-left: px2rem(30px);
            img {
                width: 100%;
            }
        }
        .head-text {
            display: flex;
            align-items: center;
            font-size: px2rem(32px);
            color: #505050;
            .header-down {
                display: inline-block;
                margin-left: px2rem(10px);
                height: px2rem(30px);
                width: px2rem(30px);
                img {
                    width: 100%;
                }
            }
        }
        .memu-btn {
            display: inline-block;
            height: px2rem(30px);
            width: px2rem(30px);
            margin-right: px2rem(30px);
            img {
                width: 100%;
            }
        }
    }
    .runc-title{
        display: flex;
        align-items: center;
        height: px2rem(80px);
        background: white;
        li{
            height: px2rem(80px);
            flex: 1;
            display: flex;
            justify-content: center;
            background: url('../../../assets/img/freebuy_img/line3.png') no-repeat right center;
            background-size: 1px 60%;
            span{
                display: block;
                height: 100%;
                line-height: px2rem(80px);
                text-align: center;
                width: 80%;
                font-size: px2rem(24px);
                color: #505050;
            }
        }
        li:last-of-type{
            background: none;
        }
        li.active{
            span{
                color: #ea5504;
                border-bottom: 3px solid #ea5504;
                box-sizing: border-box;
            }
        }
    }
    .runc-box{
        margin-top: px2rem(10px);
        background: white;
        .box-head{
            display: flex;
            align-items: center;
            height: px2rem(80px);
            border-bottom: 1px solid #f0f0f0;
            margin: 0 px2rem(20px);
            p{
                font-size: px2rem(26px);
                color: #9f9f9f;
                text-align: center;
            }
            p:first-of-type{
                flex: 1;
            }
            p:last-of-type{
                flex: 3;
            }
        }
        .box-content{
            background: white;
            position: absolute;
            top: px2rem(272px);
            bottom: px2rem(80px);
            width: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch !important;
            li{
                display: flex;
                align-items: center;
                margin: 0 px2rem(20px);
                border-bottom: 1px solid #f0f0f0;
                height: px2rem(72px);
                p{
                    font-size: px2rem(28px);
                    text-align: center;
                }
                p:first-of-type{
                    flex: 1;
                    color: #787878;
                }
                p:last-of-type{
                    flex: 3;
                    color: #eb1c24;
                    span{
                        margin-right: px2rem(10px);
                    }
                    span:last-of-type{
                        margin-right: 0;
                    }
                    span:nth-child(6),span:nth-child(7){
                        color: #0081cc;
                    }
                }
            }
            li:last-of-type{
                border: none;
            }
        }
        .hqzs{
           position: absolute;
           top: px2rem(190px);
           bottom: px2rem(202px); 
           width: 100%;
           background: white;
           display: flex;
           overflow: hidden;
           .hq-left{
            border-right: 1px solid #f0f0f0;
            width: 15%;
            .hql-top,.hql-list .hql-item{
                text-align: center;
                font-size: px2rem(24px);
            }
            .hql-top{
                position: relative;
                z-index: 10;
                color: #9f9f9f;
                background: white;
                height: px2rem(68px);
                line-height: px2rem(68px);
                border-bottom: 1px solid #f0f0f0;
            }
            .hql-list{
                transform: translateY(0px);
                .hql-item{
                    height: px2rem(58px);
                    line-height: px2rem(58px);
                    color: #505050;
                }
                .hql-item:nth-child(2n+1){
                    background: rgba(245, 145, 30, 0.1);
                }
            }
           }
           .hq-right{
            width: 85%;
            .hqr-top{
                height: px2rem(68px);
                color: #9f9f9f;
                width: 100%;
                border-bottom: 1px solid #f0f0f0;
                tr{
                    display: flex;
                    .hqr-nums{
                        height: 100%;
                        width: px2rem(48px);
                        margin: 0 px2rem(8.5px);
                        height: px2rem(68px);
                        line-height: px2rem(68px);
                        text-align: center;
                    }
                }
            }
            .hqr-content{
                position: absolute;
                top: px2rem(68px);
                bottom: 0;
                width: 100%;
                overflow: auto;
                .hqrctcontent{
                    tr{
                        display: flex;
                        width: 105%;
                        td{
                            color: #505050;
                            width: px2rem(65px);
                            height: px2rem(58px);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            box-sizing: border-box;
                            border-left: 1px solid #f0f0f0;
                            font-size: px2rem(24px);
                            .ylActive,.dlActive{
                                background: #eb1c25;
                                color: #fff;
                                border-radius: 100%;
                                display: block;
                                width: px2rem(42px);
                                height: px2rem(42px);
                                line-height: px2rem(42px);
                                text-align: center;
                            }
                            .dlActive{
                                background: #0081cc;
                            }
                        }
                        td:first-of-type{
                            border-left: none;
                        }
                    }
                    tr:nth-child(2n+1){
                        background: rgba(245, 145, 30, 0.1);
                    }
                }
                .lqrctcontent{
                    tr{
                        width: 114.5%;
                    }
                }
            }
           }
        }
        .countNum{
            background: rgba(0, 167, 155, 0.1)!important;
        }
        .averageData{
            background: rgba(191, 39, 45, 0.1);
        }
        .maxData{
            background: rgba(0, 144, 69, 0.1)!important;
        }
        .maxContinue{
            background: rgba(101, 170, 221, 0.1);
        }
        .hq_hot{
            .hq_hotTitle{
                display: flex;
                align-items: center;
                height: px2rem(80px);
                border-bottom: 1px solid #f0f0f0;
                li{
                    flex: 2;
                    text-align: center;
                    color: #9f9f9f;
                    font-size: px2rem(26px);
                }
                li:nth-child(1){
                    flex: 1;
                }
            }
            .hq_hotContent{
                position: absolute;
                top: px2rem(272px);
                bottom: px2rem(202px);
                width: 100%;
                background: white;
                overflow: auto;
                -webkit-overflow-scrolling: touch !important;
                .hq_hotList{
                    .hq_item{
                        display: flex;
                        height: px2rem(58px);
                        align-items: center;
                        p{
                            font-size: px2rem(24px);
                            color: #505050;
                            flex: 2;
                            text-align: center;
                        }
                        p:first-of-type{
                            flex: 1;
                            color: #eb1c25;
                            border-right: 1px solid #f0f0f0;
                            height: 100%;
                            line-height: px2rem(58px);
                        }
                    }
                }
            }
        }
    }
    .runc-foot{
        position: absolute;
        bottom: 0;
        background: white;
        width: 100%;
        left: 0;
        .kj-foot{
            height: px2rem(80px);
            height: 100%;
            line-height: px2rem(80px);
            text-align: center;
            font-size: px2rem(26px);
            color: #505050;
            border-top: 1px solid #f0f0f0;
        }
        .hz-foot{
            border-top: 1px solid #f0f0f0;
            .hz-footTop{
                padding: px2rem(10px) 0;
            }
            .hz-footBottom{
                height: px2rem(88px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                .hz-fbleft{
                    flex: 6.8;
                    display: flex;
                    align-items: center;
                    height: 100%;
                    border-top: 1px solid #f0f0f0;
                    .hz-delete{
                        height: 100%;
                        padding: 0 px2rem(28px);
                        display: flex;
                        align-items: center;
                        .icon-icon-26{
                            color: #9f9f9f;
                            font-size: px2rem(40px);
                        }
                    }
                    .hz-text{
                        height: px2rem(66px);
                        font-size: px2rem(22px);
                        color: #787878;
                        border-left: 1px solid #f0f0f0;
                        line-height: px2rem(66px);
                        padding-left: px2rem(30px); 
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        width: px2rem(360px);
                        span:first-of-type{
                            color: #eb1c24;
                        }
                        span:last-of-type{
                            color: #0081cc;
                        }
                    }
                }
                .hz-fbright{
                    flex: 3.2;
                    height: 100%;
                    background: #ea5504;
                    color: white;
                    font-size: px2rem(30px);
                    border: none;
                }
            }
            .tab-box{
                height: px2rem(48px);
                display: flex;
                align-items: center;
                .xh{
                    width: 15%;
                    line-height: px2rem(48px);
                    text-align: center;
                    font-size: px2rem(26px);
                    color: #9f9f9f;
                }
                .tab{
                    width: 85%;
                    overflow: hidden;
                    height: px2rem(48px);
                    .tab_item{
                        display: inline-block;
                        height: px2rem(48px);
                        line-height: px2rem(48px);
                        width: px2rem(48px);
                        margin: 0 px2rem(8.5px);
                        text-align: center;
                        color: #eb1c25;
                        font-size: px2rem(26px);
                    }    
                    .tab-active{
                        background: #eb1c25;
                        color: #fff;
                        border-radius: 100%;
                    }
                }
            }
            .tab-box:last-of-type{
                .tab_item{
                    color: #0081cc;
                }
                .tab-active{
                    background: #0081cc;
                    color: #fff;
                    border-radius: 100%;
                }
            }
        }
    }
    .runchart-mark{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        .runchart-set{
            // width: px2rem(652px);
            background: white;
            .run-setTitle{
                height: px2rem(100px);
                text-align: center;
                line-height: px2rem(100px);
                font-size: px2rem(32px);
                color: #505050;
                border-bottom: 1px solid #f0f0f0;
                box-sizing: border-box;
            }
            .run-setContent{
                padding: px2rem(34px) px2rem(68px) px2rem(54px);
                p{
                    font-size: px2rem(26px);
                    color: #9f9f9f;
                    text-align: center;
                    line-height: px2rem(60px);
                }
            }
            .mint-radiolist{
                display: flex;
                align-items: center;
                height: px2rem(80px)!important;
                .mint-radiolist-title{
                    margin: 0;
                    font-size: px2rem(28px);
                    color: #787878;
                }
                .mint-cell{
                    .mint-cell-wrapper{
                        font-size: px2rem(28px);
                        color: #505050;
                        margin-left: px2rem(30px);
                    }
                    .mint-radiolist-label{
                        padding: 0;
                        transform: scale(1);
                    }
                    .mint-radio-label{
                        margin: 0;
                    }
                    .mint-radio-input:checked + .mint-radio-core{
                        border-color: #ea5504;
                        background-color: #ea5504;
                    }
                }
            }
        }
    }
    .run-setFooter{
        display: flex;
        align-items: center;
        height: px2rem(74px);
        border-top: 1px solid #f0f0f0;
        p{
            width: 50%;
            text-align: center;
            color: #505050;
            font-size: px2rem(28px);
            height: 100%;
            line-height: px2rem(74px);
            box-sizing: border-box;
        }
        p:first-of-type{
            border-right: 1px solid #f0f0f0;
            color: #ea5504;
        }
    }
}